<template>
	<view class="container">
		<view class="top" :style="{'background':templateConfig.page.themeColor}">
			<view class="title">
				我要挣点零花钱
			</view>
			<view class="image">
				<image src="https://oss.daccf.com/nz24iwd4izjuiy6tngha6/公共/50023879-73a4-459e-b8ba-064e5b762fe1.png" mode=""></image>
			</view>
		</view>
		<view class="main_suspen">
			<view class="main_content">
				<view class="main_content_title" :style="{color: templateConfig.page.themeColor}">
					<text>欢迎加入</text>
					<text class="company">大川长风</text>
					<text>请填写申请信息</text>
				</view>
				<view class="main_content_form">
					<view class="form_input_item">
						<view class="input_label">
							<text>UID</text>
						</view>
						<u-input fontSize="28rpx" color="#1F2226" :customStyle="customStyle1" placeholder="请输入UID" v-model="form.uid" type="text" />
					</view>
					<view class="form_input_item">
						<view class="input_label">
							<text>名</text>
							<span v-for="(item, index) in 6" :key="index"></span>
							<text>字</text>
						</view>
						<u-input fontSize="28rpx" color="#1F2226" :customStyle="customStyle1" placeholder="请输入名字" v-model="form.name" type="text" />
					</view>
					<view class="form_input_item">
						<view class="input_label">
							<text class="icon">*</text>
							<text>手</text>
							<span></span>
							<text>机</text>
							<span></span>
							<text>号</text>
						</view>
						<u-input fontSize="28rpx" color="#1F2226" placeholder="请输入手机号" :customStyle="customStyle1" v-model="form.phone" type="text" />
					</view>
					<view class="form_input_item">
						<text class="input_label">当前会员</text>
						<u-input fontSize="28rpx" color="#1F2226" placeholder="请输入会员" :customStyle="customStyle1" v-model="form.merber" type="text" />
					</view>
				</view>
				<view class="agreement_box">
					<view class="radio_box">
						<u-checkbox-group>
							<u-checkbox size="30rpx" shape="circle" @change="checkboxChange"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="read_notice">
						<text>我已阅读并了解</text>
					</view>
					<view class="read_notice enter" :style="{color: templateConfig.page.themeColor}" @click="gotoAgreement">
						<text>【分销商申请协议】</text>
					</view>
				</view>
				<view class="apply_botton_box">
					<button :style="{background: templateConfig.page.themeColor}" class="apply_botton">申请成为分销商</button>
				</view>
			</view>
			<view class="main_bottom">
				<view class="main_bottom_title" :style="{color: templateConfig.page.themeColor}">
					<text>分销商特权</text>
				</view>
				<view class="main_bottom_content">
					<view class="text">1.分享有佣金：成为推广员后卖出商品，您可以获得佣金。</view>
					<view class="text">2.推广员的商品销售统一由厂家直接收款、直接发货，并 提供产品的售后服务，分销佣金由厂家统一设置。</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				templateConfig: uni.getStorageSync('templateConfig'),
				form: {
					uid: '888',
					name: '888',
					phone: '自动获取',
					merber: '钻石'
				},
				customStyle1: {
					border: "1rpx solid #E7E7E7"
				},
				agreementRadio: false
			}
		},
		onLoad() {
			this.templateConfig= uni.getStorageSync('templateConfig')
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor:this.templateConfig.page.themeColor,
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			});
		},
		onShow() {
				
		},
		methods: {
			checkboxChange (val) {
				this.agreementRadio = val;
			},
			gotoAgreement () {
				uni.navigateTo({
					url: '/packageA/user/distribution/agreement'
				})
			}
		}
	}
</script>



<style scoped lang="scss">
	page{
		background-color: #f7f7f7;
	}
.container{
	width: 100%;
	
	
	.top{
		position: relative;
		height: 320rpx;
		padding-top: 150rpx;
		box-sizing: border-box;
		
		.title{
			color: #fff;
			margin-left: 100rpx;
			font-size: 36rpx;
		}
		
		.image{
			position: absolute;
			top: 0;
			right: 20rpx;
			width: 320rpx;
			height: 320rpx;
		}
	}
	
	.main_suspen{
		width: 100%;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		background-color: #f7f7f7;
		position: relative;
		top: -30rpx;
		padding: 20rpx;
		box-sizing: border-box;
		padding-bottom: 80rpx;
		
		.main_content{
			width: 100%;
			border-radius: 15rpx;
			background-color: #fff;
			
			.main_content_title{
				font-size: 32rpx;
				font-weight: bold;
				padding: 30rpx 0;
				text-align: center;
				
				.company{
					padding: 0 10rpx;
				}
			}
			.main_content_form{
				
				.form_input_item{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 16rpx 40rpx;
					box-sizing: border-box;
					
					.input_label{
						width: 28%;
						color: #3D3D3D;
						text-align: right;
						padding-right: 30rpx;
						box-sizing: border-box;
						font-size: 28rpx;
						
						span{
							padding: 0 5rpx;
						}
					}
					.icon{
						color: #ff0000;
					}
					.input{
						
					}
				}
			}
			
			.agreement_box{
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 40rpx 0;
				
				.read_notice{
					color: #A8ABB2;
					font-size: 26rpx;
				}
				.enter{
					font-weight: bold;
				}
			}
			.apply_botton_box{
				width: 100%;
				padding: 30rpx 0;
				
				.apply_botton{
					width: 440rpx;
					height: 92rpx;
					font-size: 28rpx;
					color: #fff;
					line-height: 92rpx;
				}
				.apply_botton::after{
					border: none;
				}
			}
			
		}
		.main_bottom{
			width: 100%;
			border-radius: 15rpx;
			background-color: #fff;
			margin-top: 30rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			
			
			.main_bottom_title{
				padding: 30rpx 0;
				font: 28rpx;
				font-weight: bold;
			}
			.main_bottom_content{
				font-size: 24rpx;
				color: #A8ABB2;
				
				.text{
					padding: 10rpx 0;
					line-height: 40rpx;
				}
			}
		}
	}
}
</style>
